<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="box">
    <ul>
      <li>孙尚香</li>
      <li class="hot">诸葛亮</li>
      <li>萝莉</li>
      <li class="hot">甄姬</li>
      <li>蔡文姬</li>
    </ul>
    <p>今天星期1</p>
    <h2>你好啊</h2>
    <h2>召唤师</h2>
  </div>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    $(function () {
      // jq选择器 获取元素
      // document.querySelectorAll("#id .box ")
      //  1.id 选择器
      // jq元素 和原生元素的方法和属性不能混用
      console.log($("#box"))
      $("#box").css("background", "skyblue")
      // 2.class 选择器
      $(".hot").css({ "color": "red", "font-size": "30px" });
      // 3. 标签选择器 $("li") 
      // 4. * 通配符选择器
      $("*").css({ "margin": "0", "padding": "0" })
      // 5. #box,.hot,li  群组选择器
      $("p,h2").css("color", "blue")
      // 6. #box .hot  后代选择器
      $("#box li").css("text-decoration", "underline")
      // 7. #box>ul 子选择器
      // 8 p+h2 下一个兄弟元素
      $("p+h2").css("background", "red");
      // 9 p~h2 下面的所有兄弟元素
      $("p~h2").css("text-decoration", "line-through")








    })
  </script>
</body>

</html>